<template>
	<view>
		<view class="my-header" statusBar="true">
			<view class="circle-one"></view>
			<view class="cus-nav-bar" :style="{'padding-top':navTop+'px'}">
				<view class="cus-nav-left" @click="backMy">
					<uni-icons type="back" size="20"></uni-icons>
				</view>
				<view class="cus-nav-title">
					个人信息
				</view>
			</view>
			<view class="avatar">
				<view class="avatar-left">
					<text>{{userInfo.nickName}}</text>
				</view>
				<view class="avatar-right">
					<image :src="userInfo.headerPic" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="uni-padding-wrap">
			<view class="my-container-bg"></view>
			<view class="site-container con-position">
				<view class="uni-flex mb25">
					<view class="mr100">性别&nbsp;&nbsp;&nbsp;&nbsp;{{userInfo.sex}}</view>
					<view class="">年龄&nbsp;&nbsp;&nbsp;&nbsp;{{userInfo.age}}</view>
				</view>
				<view class="is-flex">
					<view class="">签名&nbsp;&nbsp;&nbsp;&nbsp;</view>
					<view class="">{{userInfo.signature}}</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom-wrap">
			<view class="schdule-card uni-flex jc bg-green">
				<view class="flex-item w100 tc sign color_white" @tap="navgetTo('pages/my/edit_info',userInfo,'')">
					<text>编辑</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 注入全局变量
	import api from '@/common/api/webapi.js'; /*api*/
	import storageUtil from '@/common/util/storageUtil.js';
	export default {
		components: {
			
		},
		data() {
			return {
				navTop: 40,
				userInfo: {
					mobile: "",
					showMobile: "",
					nickName: "",
					signature: '', //头像
					sex: 0,
					headerPic:"",
					age:0,
					memberAccount:""
				}
			}
		},
		computed:{
			
		},
		onLoad(opt) {
			this.getUserInfo();
			// 获取全局参数
			const app = getApp()
			this.navTop = app.globalData.navTop;
		},
		methods: {
			backMy(){
				uni.switchTab({
					url: '/pages/my/my',
					success() {
						var page = getCurrentPages().pop();
						if (page == undefined || page == null) return;
						page.onLoad();
					}
				})
			},
			checkIsLogin() {
				let userLoginFlag = storageUtil.getStorageData("isLogin");
				if (!userLoginFlag || userLoginFlag == '') {
					this.popShowHandle();
					return;
				}
			},
			getUserInfo(){
				api.getUserInfo().then(res => {
					if (res.code === 0) {
						if (res.data) {
							this.userInfo = res.data;
							this.userInfo.mobile = res.data.mobile;
							this.userInfo.ShowPhoneNumber = this.userInfo.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
						}
					} else {}
				}).catch()
			},
			popShowHandle() {
				setTimeout(() => {
					this.$refs.login.open()
				}, 50);
			},
			// 页面跳转
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			GetUserInfo() {
				let phone = storageUtil.getUserData('phoneNumber');
				if (phone != '' ** phone != undefined && phone != null) {
					this.userInfo.phoneNumber = phone;
					this.userInfo.ShowPhoneNumber = phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
				}
			},
			playphone() {
				uni.makePhoneCall({
					// 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
					phoneNumber: this.mobile,
					// 成功回调
					success: (res) => {
						// console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						// console.log('调用失败!')
					}
				});
			},
			popShowLogin() {

				setTimeout(() => {
					this.$refs.login.open()
				}, 50);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-header {
		background-color: #fff;
		height: 400rpx;
	}

	.circle-one {
		width: 520rpx;
		height: 520rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right bottom, #eff5e3 60%, #eff5e3 80%);
		position: absolute;
		z-index: 1;
		top: -100rpx;
		left: -90rpx;
	}

	.is-flex {
		display: flex;
	}

	.cus-nav-bar {
		position: sticky;
		z-index: 66;
		top: 0;
		flex-direction: row;
		height: calc(44px + env(safe-area-inset-top));
		line-height: calc(44px + env(safe-area-inset-top));
		padding: 15rpx 20rpx;
		color: #000;
		display: flex;

	}
	.cus-nav-left {
		width: 120rpx;
		position: relative;
		z-index: 77;
	}
	.cus-nav-title {
		text-align: center;
		margin-left: -120rpx;
		flex-grow: 1;
		font-size: 32rpx;
	}

	.avatar {
		display: flex;
		align-items: center;
	}

	.avatar-left {
		position: relative;
		z-index: 99;
		width: 65%;
		text-align: center;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: $uni-text-color-black;

		}
	}

	.avatar-right {
		width: 35%;
		text-align: right;
		padding-right: 50rpx;

		image {
			width: 278rpx;
			height: 278rpx;
			object-fit: cover;
			border-radius: 50%;
		}
	}

	.my-container-bg {
		height: 100rpx;
		width: 100%;
	}

	.site-card {
		width: 100%;
	}

	.my-container-card {
		background-color: $uni-text-color-white;
		box-shadow: 2rpx 2px 10rpx $uni-text-color-grey8;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.card-left {
		display: flex;
		line-height: 120rpx;
		height: 120rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.font-f-h {
			font-size: 32rpx;
		}
	}

	.card-right {
		line-height: 120rpx;
		height: 120rpx;
	}



	.con-position {
		position: relative;
	}
</style>